<template>
  <el-container class="hello">
    <el-row class="el-col-24">
      <!--
      1、数据绑定，文本插值
    -->
      <h1>{{ msg }}</h1>
      <span v-once> 这个值不会改变：{{ msg }}</span>
      <hr>
      <h2>{{ message }}</h2>
      <!--
      1、点击事件
        v-on:click=""

      -->
      <el-button type="primary" v-on:click=" message = '张俊发' ">点击将massage原有的文字改变</el-button>
      <hr>
      <el-button type="primary" @click="toClick(seen)">点击显示数据，再次点击隐藏数据</el-button>
      <!--
        1、使用v-if语句，第一次加载的时候将data中的seen传入点击方法中，做判断。
      -->
      <p v-if="seen">现在你看到我了</p>
      <hr>
      <el-button type="primary" @click="toHome()">点击发送请求，见响应到的数据绑定到userList中</el-button>
      <hr>
      <h1>请求到的数据:</h1>
      {{ this.userList.username + this.userList.userId }}
      <div class="demo-basic--circle">
        <!--加载静态图片，使用require() 加载，不然会不显示-->
        <div class="block"><el-avatar :size="50" :src=" circleUrl "></el-avatar></div>
      </div>
      <hr>
      <p >{{ vHtml }}</p>
      <p v-html="vHtml">{{ vHtml }}</p>
      <a>反转 message:{{ reversedMessage }}</a>
      <hr>

      <!--
          v-bind
          1、绑定内联样式
          v-bind:style
          2、绑定HTML Class
          v-bind:class
        -->
      <div v-bind:style="{ color:activeColor,fontSize:fontSize+'px'}">测试</div>
      <hr>
      <div class="static" v-bind:class="{ active: isActive }"></div>
      <hr>
    </el-row>

    <!--
          左侧菜单栏
        -->
    <br>
    <el-row class="el-col-24">
      <el-aside width="200px">
        <el-menu :default-openeds="['1','2']" >
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>组织管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="toUser()">用户管理</el-menu-item>
              <el-menu-item index="1-2">用户管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
    </el-row>

  </el-container>

</template>

<script>
export default {
  name: 'home',
  //返回数据property，vue会将Data中的数据渲染到vue页面上。data里面可以设置任何类型
  //如一下格式
  data() {
    return {
      activeColor:'red',
      fontSize: 30,
      message: "123",
      xyz: {
        password: '666666',
        username: 'blj'
      },
      seen:true,
      userList:{},
      circleUrl: require( "../assets/hider.png"),
      err:null,
      todos:[],
      visitCount:2,
      vHtml:'<h3 style="color:red">HTML语法</h3>',
      isActive: false,
      todoId:'', //默认选中Id
      item:[]
    }
  },
  methods:{
    async toHome(){
      const {data : res} = await this.$http.post("http://127.0.0.1:8888/frontEnd/login",this.xyz)
      console.log(res)
      this.$message(res.msg);
      this.userList = res.data;
      console.log("userList："+this.userList.username)

      /*this.$http.post("http://127.0.0.1:8888/frontEnd/login",this.xyz).then((res)=>{
        console.log(res.data)
        this.$message(res.data.msg,'info')
      }).catch((err)=>{
        console.log(err);
        this.$message.error(err)
      })*/

      /*this.$http.post("http://127.0.0.1:8888/frontEnd/login",{
        username:'blj',
        password:'666666'
      }).then(function (res) {
        console.log(res.data.msg)
      }).catch(function (error) {
        console.log(error.msg)
      })*/
    },
    toClick(event){
        console.log("Event:"+event)
        //this.seen = false;
        if (event){
          this.seen = false;return;
        }else{
          this.seen = true;return;
        }
    },
    toUser(){
      this.$router.push("home2")
    }
  },
  // 当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。
  computed:{
    //声明了一个计算属性
    reversedMessage:function () {
        return this.message.split('').reverse().join('')
    }
  },
  //监听属性值是否被改变了，当你有一些数据需要随着其它数据变动而变动时
  watch:{
    seen:function(val){
      console.log("val:"+val)
      /*if (!val){
        this.seen = true;
      }
      this.seen = false;*/
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
  .isActive{
    width: 30px;
    height: 30px;
    background-color:orangered;
  }
  .static{
    width: 20px;
    height: 20px;
    background: #000;
  }
.el-aside {
  width: 400px;
  height: 300px;
  background-color: #B3C0D1;
}
.el-menu{
  background-color: #B3C0D1;
  line-height: 60px;
}
</style>
